<!--
* @author wn
* @date 2022/05/11 11:53:50
* @description: 面包屑组件  插入 xtx-bread-item
* 没有 to 就是 span 有 to 就是router-link
*
* render 函数
* 组件内容 1 el: "#app" 找到容器 容器内容就是组件内容
          2 template:`<div>11</div>`
					3 render: h => h(App)  优先级最高
!-->
<!-- <template>
	<div class="xtx-bread">
		<slot />
	</div>
</template> -->
<script>
// import { h } from 'vue'
export default {
	name: 'XtxBread',
	/**
	 * 1 单文件组件  去除 template
	 * 2 返回值 就是组件内容
	 * 3 2.0 h参数传进来   3.0 导入
	 * 4 参数 1 标签名  2 标签属性  3 子节点
	 */
	// vue3
	setup(props, { slots }) {
		/**
		 *  1 创建 xtx-bread 父容器
		 *  2 获取默认插槽内容
		 *  3 创建子节点  去掉最后一个  i >
		 *  4 放到 h函数中 子节点位置
		 *   jsx语法  { 取值 }
		 */
		const render = () => {
			const items = slots.default()
			const subItems = []
			items.forEach((item, index) => {
				// 防止传入注释，注释后面也会创建 i 标签
				// type属性我们可以知道 组件的类型
				if (item.type.name) {
					subItems.push(item)
					if (index < items.length - 1) {
						// subItems.push(h('i', { class: 'iconfont icon-angle-right' }))
						subItems.push(<i class="iconfont icon-angle-right"></i>)
					}
				}
			})
			// return h('div', { class: 'xtx-bread' }, subItems)
			return <div class="xtx-bread">{subItems}</div>
		}
		return render
	},
}
</script>
<style scoped lang="less">
.xtx-bread {
	display: flex;
	padding: 25px 10px;

	i {
		line-height: 22px;
		font-size: 12px;
		margin: 0 5px;
	}
}
</style>
